<template>
  <!-- 地图容器 -->
  <view class="map_container">
    <map
        class="map"
        id="map"
        :longitude="longitude"
        :latitude="latitude"
        :scale="14"
        :show-location="true"
        :markers="markers"
        @markertap="handleMarkerTap"
    ></map>
  </view>

  <!-- 当前定位地址显示 -->
  <view class="current_address">
    <text>当前地址：{{ address }}</text>
  </view>

  <!-- 附近建筑列表 -->
  <view class="nearby_list">
    <view class="list_title">附近建筑</view>
    <view
        class="list_item"
        v-for="(item, index) in nearbyBuildings"
        :key="index"
        @click="handleListItemClick(index)"
    >
      <view class="item_name">{{ item.title }}</view>
      <view class="item_address">{{ item.address || '未知地址' }}</view>
    </view>
  </view>

  <!-- 选中POI详情展示 -->
  <view class="place_info" v-if="showPlaceInfo">
    <text>{{ placeData.title }}</text>
    <text>{{ placeData.address }}</text>
    <text>{{ placeData.telephone }}</text>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 地图中心经纬度
const longitude = ref(0);
const latitude = ref(0);

// 地图标记点
const markers = ref([]);
let wxMarkerData = []; // 用于存储标记点原始数据

// 当前地址信息
const address = ref('获取地址中...');

// 附近建筑列表数据
const nearbyBuildings = ref([]);

// POI详情数据
const placeData = ref({
  title: '',
  address: '',
  telephone: ''
});

// 是否显示POI详情
const showPlaceInfo = ref(false);

// 引入百度地图SDK
const bmap = require('../../static/libs/bmap-wx.js');

// 初始化百度地图对象
const BMap = new bmap.BMapWX({
  ak: 'HhYw5ToSicsb88caSpDLeYjxJzcIMBOo' // 替换为你的百度地图AK
});

// 页面加载时初始化
onMounted(() => {
  // 获取定位并解析地址
  getLocationAndAddress();
});

// 核心：获取定位并解析地址
const getLocationAndAddress = () => {
  BMap.getWXLocation('gcj02',
      (res) => { // 定位成功
        const { latitude: lat, longitude: lng } = res;
        longitude.value = lng;
        latitude.value = lat;

        BMap.regeocoding({
          location: `${lat},${lng}`,
          success: (addressRes) => {
            const fullAddress = addressRes.originalData.result.formatted_address;
            // 1. 提取到“区”级的地址
            const districtAddress = extractDistrictAddress(fullAddress);
            // 2. 存储完整地址和区级地址到本地
            wx.setStorageSync('currentAddress', fullAddress);
            wx.setStorageSync('districtAddress', districtAddress);
            // 3. 地图页显示完整地址
            address.value = fullAddress;

            // 定位成功后再检索周边建筑
            searchNearbyPoi(lat, lng);
          },
          fail: (err) => {
            console.error('地址解析失败', err);
            address.value = '无法获取详细地址';
            wx.setStorageSync('currentAddress', '无法获取详细地址');
            wx.setStorageSync('districtAddress', '无法获取地址');
          }
        });
      },
      (err) => { // 定位失败
        console.error('定位失败', err);
        address.value = '定位失败，请检查权限';
        wx.setStorageSync('currentAddress', '定位失败，请检查权限');
        wx.setStorageSync('districtAddress', '定位失败');
      }
  );
};

// 辅助函数：提取到“区”级的地址
const extractDistrictAddress = (fullAddress) => {
  // 地址格式示例：“四川省成都市武侯区武侯祠大街264号”
  const districtRegex = /^(.+?省|.+?市)(.+?市|.+?区|.+?县)(.+?区|.+?县)/;
  const match = fullAddress.match(districtRegex);
  if (match) {
    return match[1] + match[2] + (match[3] || '');
  }
  // 若解析失败，返回完整地址的前半部分
  return fullAddress.split('街道')[0] || fullAddress;
};

// 检索周边POI（建筑）
const searchNearbyPoi = (lat, lng) => {
  const fail = (data) => {
    console.error('POI检索失败', data);
  };

  const success = (data) => {
    wxMarkerData = data.wxMarkerData;
    markers.value = wxMarkerData;
    // 将检索结果赋值给附近建筑列表
    nearbyBuildings.value = wxMarkerData;

    // 如果定位未成功，使用第一个检索结果的坐标
    if (latitude.value === 0 && longitude.value === 0 && wxMarkerData.length > 0) {
      latitude.value = wxMarkerData[0].latitude;
      longitude.value = wxMarkerData[0].longitude;
    }
  };

  // 发起检索，扩大检索范围并增加结果数量
  BMap.search({
    query: '建筑', // 搜索关键词为建筑
    location: `${lat},${lng}`, // 使用当前定位作为中心
    radius: 2000, // 检索半径2000米
    page_size: 20, // 最多返回20条结果
    page_num: 0, // 第0页
    fail,
    success,
    iconPath: '../../img/86-869339_yellow-map-marker-png.png',
    iconTapPath: '../../img/OIP-C.jpg'
  });
};

// 同时给标记点点击也添加相同逻辑
const handleMarkerTap = (e) => {
  const markerId = e.markerId;
  showSearchInfo(wxMarkerData, markerId);
  changeMarkerColor(wxMarkerData, markerId);

  // 存储选中的建筑名到本地存储
  wx.setStorageSync('selectedBuilding', wxMarkerData[markerId].title);
  // 返回首页
  uni.navigateBack({
    delta: 1
  });
};


// 在handleListItemClick函数中添加存储选中建筑名的逻辑
const handleListItemClick = (index) => {
  // 点击列表项时，同步选中对应的标记点
  showSearchInfo(nearbyBuildings.value, index);
  changeMarkerColor(nearbyBuildings.value, index);
  // 地图中心移动到选中的建筑
  longitude.value = nearbyBuildings.value[index].longitude;
  latitude.value = nearbyBuildings.value[index].latitude;

  // 存储选中的建筑名到本地存储
  wx.setStorageSync('selectedBuilding', nearbyBuildings.value[index].title);
  // 返回首页
  uni.navigateBack({
    delta: 1 // 返回上一级页面（即首页）
  });
};

// 显示POI详情
const showSearchInfo = (data, index) => {
  placeData.value = {
    title: `名称：${data[index].title}`,
    address: `地址：${data[index].address || '未知地址'}`,
    telephone: `电话：${data[index].telephone || '暂无电话'}`
  };
  showPlaceInfo.value = true;
};

// 切换选中标记点的颜色
const changeMarkerColor = (data, index) => {
  const newMarkers = data.map((item, i) => {
    return {
      ...item,
      iconPath: i === index
          ? '../../img/marker_yellow.png'
          : '../../img/marker_red.png'
    };
  });
  markers.value = newMarkers;
};

</script>

<style scoped>
.map_container {
  height: 300px;
  width: 100%;
}

.map {
  height: 100%;
  width: 100%;
}

/* 当前地址样式 */
.current_address {
  padding: 15rpx 20rpx;
  background-color: #f5f5f5;
  font-size: 32rpx;
  color: #333;
  border-bottom: 1px solid #eee;
}

/* 附近建筑列表样式 */
.nearby_list {
  padding-bottom: 20rpx;
}

.list_title {
  padding: 20rpx;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
}

.list_item {
  padding: 20rpx;
  border-bottom: 1px solid #f5f5f5;
  background-color: #fff;
}

.list_item:active {
  background-color: #f9f9f9;
}

.item_name {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.item_address {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
}

/* POI详情样式 */
.place_info {
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f9f9f9;
}

.place_info text {
  display: block;
  margin: 10rpx 0;
}
</style>